<template>
  <div>
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
      @visible-change="handleVisibleChange"
    />
    <c-permission-tabs v-model="activeTab" code="tab" type="card">
      <el-tab-pane label="全部" name="tobe_all" lazy>
        <Table ref="tobe_all" :filters-raw="filtersRaw" :params-raw="paramsRaw" :table-index="3" :fixed-filters-raw="[]" button-group-code="tobe_all" />
      </el-tab-pane>
      <el-tab-pane label="待维护" name="tobe_followup" lazy>
        <Table ref="tobe_followup" :filters-raw="filtersRaw" :params-raw="paramsRaw" :table-index="1" :fixed-filters-raw="unmaintainedFiltersRaw" button-group-code="tobe_followup" />
      </el-tab-pane>
      <el-tab-pane label="待审核" name="tobe_audit" lazy>
        <Table ref="tobe_audit" :filters-raw="filtersRaw" :params-raw="paramsRaw" :table-index="2" :fixed-filters-raw="unreviewedFiltersRaw" button-group-code="tobe_audit" />
      </el-tab-pane>
    </c-permission-tabs>
  </div>
</template>

<script>
import Table from './components/table'
export default {
  name: 'WeekTask',
  components: {
    Table
  },
  props: {
  },
  data() {
    return {
      searchConfig: [
        { label: '市场编码', prop: 'marketCode', type: 'text', value: '', placeholder: '' },
        { label: '市场名称', prop: 'marketName', type: 'text', value: '', placeholder: '支持模糊查询' },
        {
          type: 'select',
          prop: 'marketType',
          label: '市场类型',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/TOBE_MARKET_TYPE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          label: '所属办事处',
          prop: 'agencyCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        { label: '责任人编码', prop: 'responsibleCode', type: 'text', value: '', placeholder: '' },
        { label: '责任人姓名', prop: 'responsibleName', type: 'text', value: '', placeholder: '支持模糊查询' },
        {
          type: 'select',
          prop: 'progressStage',
          label: '进展程度',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_MARKET_BUID_FOLLOW_UP_PROGRESS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'select',
          prop: 'maintenanceStage',
          label: '跟进状态维护进度',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_MARKET_BUID_WEEK_MAINTENANCE_PROGRESS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          label: '创建时间',
          prop: 'createTime',
          type: 'date',
          value: '',
          dateType: 'daterange',
          placeholder: '请选择',
          filter: false,
          dateConfig: {
          }
        }
      ],
      activeTab: 'tobe_all',
      filtersRaw: [],
      paramsRaw: {},
      unmaintainedFiltersRaw: [
        { id: 'marketFollowUpStage', property: 'marketFollowUpStage', value: '[C,D]', operator: 'NOT IN' },
        { id: 'enable', property: 'enable', value: '1', operator: '=' },
        { id: 'maintenanceStage', property: 'maintenanceStage', value: '[A,D]', operator: 'IN' }
      ],
      unreviewedFiltersRaw: [
        { id: 'maintenanceStage', property: 'maintenanceStage', value: '[B]', operator: 'IN' }
      ]
    }
  },
  computed: {
  },
  watch: {
    activeTab: {
      handler(v) {
        if (this.$refs[v]) {
          this.$nextTick(() => {
            this.refreshTableBoxData('onPage')
          })
        }
      }
    }
  },
  methods: {
    clearSearch() {
      this.filtersRaw = []
      this.paramsRaw = []
    },
    handleSearch({ filtersRaw: _filtersRaw, paramsRaw: _paramsRaw }) {
      const filtersRaw = [..._filtersRaw]
      const paramsRaw = { ..._paramsRaw }
      if (paramsRaw.createTime) {
        filtersRaw.push({ id: 'createTime1', property: 'createTime', value: `${paramsRaw.createTime[0]} 00:00:00`, operator: '>=' })
        filtersRaw.push({ id: 'createTime2', property: 'createTime', value: `${paramsRaw.createTime[1]} 23:59:59`, operator: '<=' })
        delete paramsRaw.createTime
      }
      this.filtersRaw = filtersRaw
      this.paramsRaw = paramsRaw
      this.refreshTableBoxData()
    },
    handleVisibleChange() {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableHeight()
      })
    },
    refreshTableBoxData(flag) {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableBoxData(flag)
      })
    }
  }
}
</script>
